<!--
 * @Author: JiraiyaChen 49619401+JiraiyaChen@users.noreply.github.com
 * @Date: 2024-01-17 13:41:26
 * @LastEditors: JiraiyaChen 49619401+JiraiyaChen@users.noreply.github.com
 * @LastEditTime: 2024-01-17 13:42:14
 * @Description: 电子签章
-->

<template>
  <div>
    <div style="display: flex">
      <el-input
        :disabled="disabled"
        :sign="sign"
        @focus="onFocus"
        style="width: 130px"
      >
        <template slot="prefix" style="border: none">
          <el-image
            :src="value"
            style="width: 100%; height: 100%; padding-top: 5px; cursor: pointer"
            @click="onFocus"
          />
        </template>
      </el-input>
    </div>
    <!-- 签章弹窗 -->
    <signature-dialog ref="UserDialog" :multi="multi" @onSelect="onSelect" />
  </div>
</template>

<script>
import SignatureDialog from "./dialog/SignatureDialog.vue";
export default {
  name: "FancySignatureList",
  components: {
    SignatureDialog,
  },
  filters: {
    imgSrc() {
      const src = this.value;
      console.log("img src =>", src);
      return src && src.indexOf("_*_") !== -1 ? src.split("_*_")[0] : src;
    },
    getIds(val) {
      return val && val.indexOf("_*_") !== -1
        ? val.split("_*_")[1].split(",")
        : val.split(",");
    },
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    multi: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    sign: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "请选择签章",
    },
  },
  data() {
    return {
      obj: {},
    };
  },
  methods: {
    onFocus() {
      sessionStorage.setItem("isSign", this.sign);
      this.$refs.UserDialog.dialogVisible = true;
    },
    onSelect(obj) {
      this.obj = obj;
      this.$emit("input", obj[0].signUrl);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input--medium .el-input__inner {
  height: 100px;
  line-height: 100px;
  border: none;
  cursor: pointer;
}

::v-deep .el-image__error {
  background: #fff !important;
  color: #fff !important;
}
</style>
